<template>
  <div class="swiper-container" ref="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"
           v-for="carouse in list" :key="carouse.id">
        <img :src="carouse.imgUrl">
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
import Swiper from "swiper/swiper-bundle.min.js";
export default {
  name: "index",
  props:{
      list:Array
  },
  methods:{
      init(){
        new Swiper (this.$refs.swiper, {
          direction: 'horizontal', // 水平切换选项
          loop: true, // 循环模式选项

          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },

          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          }

        })
      }
  },
  watch:{
    list:{
      //当banners有变化时，才会触发
      handler(val){
        if (val.length<=0) return ;
        this.$nextTick(()=>{
              this.init()
        })
      },
      deep:true,
      immediate:true
    }
  }
}
</script>

<style scoped>

</style>
